<template>
    <section class="header">
       <div class="header-left">
          <span class="iconfont">&#xe624;</span>
       </div>
       <div class="header-input">
          <span class="iconfont">&#xe632;</span>
          输入城市/景点/游玩主题
       </div>
       <router-link to="/city">
          <div class="header-right">
              {{city}}
              <span class="iconfont">&#xe615;</span>
          </div>
       </router-link>
    </section>
</template>

<script>
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}
</script>

<style scoped lang="less">
    @import '~styles/varibles.less';
    .header {
        display: flex;
        line-height: @headerHeight;
        background: @bgColor;
        color: @fontColor;
    }
    .header-left {
        width: .64rem;
        float: left ;
        display: flex;
        justify-content: center;
    }
    .header-left > span{
        font-size: .4rem
    }
    .header-input {
        flex: 1;
        background: #fff;
        border-radius: .1rem;
        margin-top: .12rem;
        margin-left: .2rem;
        height: .64rem;
        line-height: .64rem;
        color: #ccc;
        padding-left: .2rem;
    }
    .header-right {
        width: 1.24rem;
        float: right;
        text-align: center;
        font-size: .30rem;
        color: @fontColor;
    }
    .header-right > span {
        font-size: .20rem;
    }
</style>
